<template>
  <rx-dialog
    order="button"
    btnalign="center"
    class="dialog"
    @handOk="handleSubmit"
    @cancel="cancel"
  >
    <rx-layout class="barlidt">
      <div slot="left" showButton="true" width="290">
        <ins-portal-mobile-left @addBasic="addBasic" ref="left" />
      </div>
      <div slot="center">
        <ins-portal-mobile-center @itemedit="itemedit" @cancel="cancel" :pkId="pkId" ref="center"/>
      </div>
      <div slot="right" :showModuleRight='ringhtest' showButton="true" width="400">
        <ins-portal-mobile-right ref="right" @freshen="freshen"/>
      </div>
    </rx-layout>
  </rx-dialog>
</template>


<script>
  import { RxDialog, Util } from "@lowcode/jpaas-common-lib"
  import InsPortalMobileCenter from './InsPortalMobileCenter'
  import InsPortalMobileLeft from './InsPortalMobileLeft'
  import InsPortalMobileRight from './InsPortalMobileRight'

  export default {
    components: {
      InsPortalMobileCenter,
      InsPortalMobileLeft,
      InsPortalMobileRight,
      RxDialog,
    },
    data() {
      return {
        ringhtest:true
      }
    },
    props: {
      pkId: { type: String },
      layerid: String,
      lydata: Object,
      destroy:Function
    },
    provide(){
      return{
        editsunbom:this.editsunbom
      }
    },
    mounted() {},
    methods: {
      i18n(name,text,key){
        return this.$ti18(name,text,"insPortalDef",key);
      },
      freshen(){
        this.$refs.center.$forceUpdate();
      },
      itemedit(item){
        this.$refs.right.itemEdit(item);
      },
      addBasic(type){
        this.$refs.center.addBasic(type);
      },
      load() {
        var self_ = this
        if (this.pkId) {
          FormMobileApi.get(this.pkId).then(res => {
            if (res.success) {
              self_.$refs.left.init(res.data)
            }
          })
        }
      },
      handleSubmit(){
        this.$refs.center.save();
      },
      cancel(){
        Util.closeWindow(this,'cancel');
      },
      editsunbom(){
        this.ringhtest = false
      }
    },
    created() {}
  }
</script>

<style scoped>
  .barlidt {
    background-color: #f0f2f5;
  }
  .portal-container {
    width: 100%;
    height: 100%;
  }

  .portal-nav {
    width: 100%;
    height: 60px;
    background-color: #409efe;
    display: flex;
    align-items: center;
  }

  .portal-nav span {
    display: block;
    font-size: 1.8rem;
    color: white;
    margin-left: 20px;
  }

  .portal-body {
    width: 100%;
    height: 100%;
    min-width: 1350px;
    overflow-x: auto;
  }

  .portal-left {
    width: 20%;
    height: 100%;
    box-sizing: border-box;
    float: left;
  }

  .portal-center {
    width: 55%;
    height: 100vh;
    overflow-y: auto;
    box-sizing: border-box;
    background-color: #edf2f5;
    border-left: 1px solid #e8e8e8;
    border-right: 1px solid #e8e8e8;
    float: left;
  }

  .portal-right {
    width: 25%;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    float: right;
  }

  .clearfloat:after {
    display: block;
    clear: both;
    content: '';
    visibility: hidden;
    height: 0;
  }

  .clearfloat {
    zoom: 1;
  }
</style>

